<template>
  <el-card class="post">
    <el-container>
      <el-main>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="title" label="文章标题" min-width="100">
          </el-table-column>

          <el-table-column prop="content" label="文章内容" min-width="100">
            <template v-slot="{ row }">
              <span class="text">
                {{ row.content }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="发布时间" min-width="100">
            <template v-slot="{ row }">
              {{ row.ctime | formatDate }}
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" label="更新时间" min-width="100">
            <template v-slot="{ row }">
              {{ row.utime | formatDate }}
            </template>
          </el-table-column>
          <el-table-column min-width="140" label="操作">
            <template slot-scope="{ row }">
              <el-link type="warning" :underline="false" @click="goPostDetail(row)">
                查看帖子
              </el-link>
              <el-link type="danger" :underline="false" @click="
                deleteById($api.deletePost, fetchData, row.id, row.title)
                ">
                删除帖子
              </el-link>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange($event, fetchData)"
          @current-change="handleCurrentChange($event, fetchData)" :page-sizes="[1, 2, 5, 10]"
          layout="total,sizes, prev, pager, next" :total="total">
        </el-pagination>
      </el-main>
    </el-container>
  </el-card>
</template>

<script>
import mixins from '@mixins';
import { postState } from '@static';
import { mapMutations, mapState } from 'vuex';
export default {
  mixins: [mixins.admin],
  data () {
    return {
      rules: {},
      postState
    };
  },
  methods: {
    ...mapMutations(['setCurrentPost']),
    async fetchData () {
      const { list, total } = await this.$api.getMyPost({
        ...this.query,
        keyword: this.currentUser.id
      });
      this.tableData = list.map((item) => {
        return {
          ...item
        };
      });
      this.total = total;
    },
    goPostDetail (data) {
      this.setCurrentPost(data);
      this.$router.push(`/discuss/${data.id}`);
    }
  },
  computed: {
    ...mapState(['currentUser'])
  },
  created () {
    this.fetchData();
  }
};
</script>

<style lang="less" scoped>
@import "~@css/aCommon.less";

.text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>
